<template>
    <div class="box">
        <Tips :msg="tips" v-show="tipshow"/>
        <div class="wrap">
            <div class="title">添加评论</div>
            <img src="@/assets/close.png" alt="" @click="close">
            <textarea class="input" placeholder="请输入要添加的评论" v-model="content"></textarea>
            <div class="btn">
                <div class="exit" @click="close">取消添加</div>
                <div class="yes" @click="getComment">确认添加</div>
            </div>
        </div>
    </div>
</template>

<script>
    import Tips from '@/components/Tips'
    export default {
        name:"AddComment-Component",
        components:{Tips},
        data(){
            return {
                content:"",
                tips:"",
                tipshow:false
            }
        },
        methods:{
            // 关闭
            close(){
                this.$bus.$emit('close',false)
            },
            // 传值给父组件
            getComment(){
               this.$bus.$emit('getComment',this.content)
               this.content = ''
            }
        }
    }
</script>

<style scoped lang="less">
    .box{
        background: rgba(0, 0, 0, 0.37);
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;

        .wrap{
            width: 50vw;
            height: 30vw;
            background: rgba(255, 255, 255, 0.863);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border-radius: 0.7vw;

            .title{
                text-align: center;
                padding: 1.3vw 0;
                font-size: 1.8vw;
                color: rgba(51, 51, 51, 0.815);
            }

            img{
                width: 3vw;
                height: 3vw;
                cursor: pointer;
                position: absolute;
                right: 1.3vw;
                top: 0.7vw;
            }

            .input{
                width: 40vw;
                height: 12vw;
                padding: 0.5vw;
                font-size: 1vw;
                display: block;
                margin: 0 auto;
                background: #f2f4f7;
                resize: none;
                outline: none;
                transition: 0.5s;
                border-radius: 0.7vw;
                border: 1px solid #ccc;
                overflow:auto;

                &:focus{
                    font-size: 1.3vw;
                    box-shadow: 0 0 0.3vw 0.3vw rgba(51, 51, 51, 0.116);
                }
            }

            .btn{
                width: 40vw;
                display: flex;
                margin: 0 auto;
                padding-top: 2.6vw;
                div{
                    width: 6vw;
                    height: 2.5vw;
                    text-align: center;
                    line-height: 2.5vw;
                    color: #fff;
                    cursor: pointer;

                    
                }
                .yes{
                    background: rgb(219, 15, 15);

                    &:hover{
                        background: rgb(148, 11, 11);
                    }
                }

                .exit{
                    background: rgb(114, 211, 89);
                    margin-right: 4vw;

                    &:hover{
                        background: rgb(67, 160, 44);
                    }
                }
            }

        }
    }
</style>